<template>
  <div id="temp">
    <div class="stuInfo">
      <div class="tit">
        <span>客户详情</span>
        <span class="icon" @click="dialogFormVisible1=true"></span>
        <!-- 修改学员详情 -->
        <div class="modification">
          <el-dialog title="" :visible.sync="dialogFormVisible1">
            <el-form :model="customerDetailForm" label-width="120px" :rules="CustomerRules" ref="CustomerRulesName">
              <el-row>
                <el-col :span="8">
                  <div>
                    <el-form-item label="客户编号" prop="cnumber">
                      <el-input v-model="customerDetailForm.cnumber" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机构性质">
                      <el-select v-model="customerDetailForm.scope" auto-complete="off">
                        <el-option v-for="item in scope" :key="item.id" :label="item.property" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="地址">
                      <el-input v-model="customerDetailForm.address" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="第一联系人">
                      <el-input v-model="customerDetailForm.fcontact" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="主要船舶类型">
                      <el-select v-model="customerDetailForm.vessel_type" auto-complete="off">
                        <el-option v-for="item in VesselType" :key="item.id" :label="item.type" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div>
                    <el-form-item label="全称" prop="name">
                      <el-input v-model="customerDetailForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="国家">
                      <el-select v-model="customerDetailForm.country" filterable clearable placeholder="请选择">
                        <el-option v-for="item in countryList.country" :key="item[0]" :label="item[1]" :value="item[1]">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="公司公共邮箱">
                      <el-input v-model="customerDetailForm.email" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="第一联系人电话">
                      <el-input v-model="customerDetailForm.ftel" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="ECDIS1">
                      <el-input v-model="customerDetailForm.ecdis1" auto-complete="off"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div>
                    <el-form-item label="缩写">
                      <el-input v-model="customerDetailForm.short_name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="省份">
                      <el-select v-model="customerDetailForm.province" filterable clearable placeholder="请选择">
                        <el-option v-for="item in countryList.province" :key="item.ProID" :label="item.name" :value="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="配员类型">
                      <el-select v-model="customerDetailForm.peiyuan" clearable>
                        <el-option label="混派" value="混派"></el-option>
                        <el-option label="套派" value="套派"></el-option>
                        <el-option label="单派" value="单派"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="第一联系人邮箱">
                      <el-input v-model="customerDetailForm.femail" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="ECDIS2">
                      <el-input v-model="customerDetailForm.ecdis2" auto-complete="off"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitCustomerEdit()">提 交</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
      <el-row>
        <el-col :span="8">
          <div>
            <el-col :span="11">
              <span class="left">客户编号：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.cnumber}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <span class="left">机构性质：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.scope_name}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <span class="left">地址：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.address}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <span class="left">第一联系人：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.fcontact}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <span class="left bd-bt">主要船舶类型：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.vessel_type_name}}</span>
            </el-col>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-col :span="11">
              <span class="left">全称：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.name}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <span class="left">国家：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.country}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <span class="left">公司公共邮箱：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.email}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <span class="left">第一联系人电话：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.ftel}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <span class="left bd-bt">ECDIS1：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.ecdis1}}</span>
            </el-col>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-col :span="11">
              <span class="left">缩写：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.short_name}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <span class="left">省份：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.province}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <span class="left">配员类型：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.peiyuan}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <span class="left">第一联系人邮箱：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.femail}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="11">
              <span class="left bd-bt">ECDIS2：</span>
            </el-col>
            <el-col :span="13">
              <span class="right">{{customerDetail.ecdis2}}</span>
            </el-col>
          </div>
        </el-col>
      </el-row>
      <div class="remarks">
        <span class="icon icon1" v-show="!flag" @click="isShow"></span>
        <span class="icon icon2" v-show="flag" @click="isShow"></span>
        <span>REMARKS</span>
      </div>
      <div class="showBox" ref="showBox" v-show="flag">
        <el-row v-if="ContactData.length" v-for="item in ContactData" :key="item.id">
          <el-col :span="8">
            <div>
              <el-col :span="11">
                <div class="left">
                  <el-col :span="12">
                    <span class="icon edit" @click="getContactDetail(item.id)"></span>
                    <span class="icon del" @click="open2(item.id,'customerContact')"></span>
                    <span class="icon add" @click="openAddContact()"></span>
                  </el-col>
                  <el-col :span="12">
                    <span>联系人：</span>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="13">
                <span class="right">{{item.name}}</span>
              </el-col>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-col :span="11">
                <span class="left">联系电话：</span>
              </el-col>
              <el-col :span="13">
                <span class="right">{{item.tel}}</span>
              </el-col>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-col :span="11">
                <span class="left">邮箱：</span>
              </el-col>
              <el-col :span="13">
                <span class="right">{{item.email}}</span>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="!ContactData.length">
          <el-col :span="8">
            <div>
              <el-col :span="11">
                <div class="left">
                  <el-col :span="12">
                    <span class="icon add" @click="openAddContact()"></span>
                  </el-col>
                  <el-col :span="12">
                    <span>联系人：</span>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="13">
                <span class="right"></span>
              </el-col>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-col :span="11">
                <span class="left">联系电话：</span>
              </el-col>
              <el-col :span="13">
                <span class="right"></span>
              </el-col>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-col :span="11">
                <span class="left">邮箱：</span>
              </el-col>
              <el-col :span="13">
                <span class="right"></span>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="VesselTypeData.length" v-for="item in VesselTypeData" :key="item.id">
          <el-col :span="8">
            <div>
              <el-col :span="11">
                <div class="left">
                  <el-col :span="12">
                    <span class="icon edit" @click="getVesselTypeDetail(item.id)"></span>
                    <span class="icon del" @click="open2(item.id,'customerVesselType')"></span>
                    <span class="icon add" @click="openAddVesselType()"></span>
                  </el-col>
                  <el-col :span="12">
                    <span>船舶类型：</span>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="13">
                <span class="right">{{item.type}}</span>
              </el-col>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-col :span="11">
                <span class="left">船舶吨位：</span>
              </el-col>
              <el-col :span="13">
                <span class="right">{{item.dunwei}}</span>
              </el-col>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-col :span="11">
                <span class="left">船只数量：</span>
              </el-col>
              <el-col :span="13">
                <span class="right">{{item.num}}</span>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="!VesselTypeData.length">
          <el-col :span="8">
            <div>
              <el-col :span="11">
                <div class="left">
                  <el-col :span="12">
                    <span class="icon add" @click="openAddVesselType()"></span>
                  </el-col>
                  <el-col :span="12">
                    <span>船舶类型：</span>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="13">
                <span class="right"></span>
              </el-col>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-col :span="11">
                <span class="left">船舶吨位：</span>
              </el-col>
              <el-col :span="13">
                <span class="right"></span>
              </el-col>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-col :span="11">
                <span class="left">船只数量：</span>
              </el-col>
              <el-col :span="13">
                <span class="right"></span>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <!-- REMARKS表单弹框 -->
        <el-dialog title="" :visible.sync="ContactOpen" size="tiny">
          <el-form :model="ContactDetail" :rules="ContactRules" ref="ContactRulesName">
            <el-form-item label="联系人" label-width="90px" prop="name">
              <el-input v-model="ContactDetail.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" label-width="90px">
              <el-input v-model="ContactDetail.tel" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" label-width="90px">
              <el-input v-model="ContactDetail.email" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitContact()">提 交</el-button>
          </div>
        </el-dialog>
        <el-dialog title="" :visible.sync="VesselTypeOpen" size="tiny">
          <el-form :model="VesselTypeDetail" :rules="VesselTypeRules" ref="VesselTypeRulesName">
            <el-form-item label="船舶类型" label-width="90px" prop="type">
              <el-select v-model="VesselTypeDetail.type">
                <el-option v-for="item in VesselType" :key="item.id" :label="item.type" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="船舶吨位" label-width="90px">
              <el-input v-model="VesselTypeDetail.dunwei" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="船只数量" label-width="90px">
              <el-input v-model="VesselTypeDetail.num" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitVesselType()">提 交</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="record">
      <el-tabs type="border-card" v-model="activeName1" @tab-click="formChange">
        <el-tab-pane label="培训记录" name="customerTraining">
          <table class="tab-table">
            <thead>
              <tr>
                <th>课程编号</th>
                <th>课程名称</th>
                <th>开班日期</th>
                <th>期数</th>
                <th>推荐学员数量</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in customerTraining" :key="item.id">
                <td>{{item.code}}</td>
                <td>{{item.name}}</td>
                <td>{{item.startdate}}</td>
                <td>{{item.year_periods}}</td>
                <td @click="studentInfo=true">{{item.quantity}}</td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane label="客户活动" name="customerLaiFang">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="来访记录" name="customerLaiFang">
              <div class="hint">点击“是”查看具体安排</div>
              <table class="tab-table">
                <thead>
                  <tr>
                    <th>
                      <span class="icon add" @click="openAddLaiFang"></span>
                    </th>
                    <th>姓名</th>
                    <th>职务</th>
                    <th>联系电话</th>
                    <th>来访日期</th>
                    <th>接机</th>
                    <th>送机</th>
                    <th>午餐</th>
                    <th>晚餐</th>
                    <th>住宿</th>
                    <th>付费方</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in list" :key="item.id">
                    <td>
                      <span class="icon edit" @click="getLaiFangFormData(item.id)"></span>
                      <span class="icon del" @click="open2(item.id,'customerLaiFang')"></span>
                    </td>
                    <td>{{item.name}}</td>
                    <td>{{item.zhiwu}}</td>
                    <td>{{item.tel}}</td>
                    <td>{{item.date}}</td>
                    <td>
                      <!-- Popover 弹出框 -->
                      <el-popover v-if="item.isjieji" placement="bottom" width="200" trigger="click" :content="item.jiejicont">
                        <el-button type="primary" size="mini" slot="reference">是</el-button>
                      </el-popover>
                      <span v-else>否</span>
                      <el-button v-if="item.isjieji && !item.okjieji" type="primary" size="mini" @click="confirm('okjieji',item.id)">完成</el-button>
                      <span v-else>{{item.okjieji}}</span>
                    </td>
                    <td>
                      <!-- Popover 弹出框 -->
                      <el-popover v-if="item.issongji" placement="bottom" width="200" trigger="click" :content="item.songjicont">
                        <el-button type="primary" size="mini" slot="reference">是</el-button>
                      </el-popover>
                      <span v-else>否</span>
                      <el-button v-if="item.issongji && !item.oksongji" type="primary" size="mini" @click="confirm('oksongji',item.id)">完成</el-button>
                      <span v-else>{{item.oksongji}}</span>
                    </td>
                    <td>
                      <!-- Popover 弹出框 -->
                      <el-popover v-if="item.iswucan" placement="bottom" width="200" trigger="click" :content="item.wucancont">
                        <el-button type="primary" size="mini" slot="reference">是</el-button>
                      </el-popover>
                      <span v-else>否</span>
                      <el-button v-if="item.iswucan && !item.okwucan" type="primary" size="mini" @click="confirm('okwucan',item.id)">完成</el-button>
                      <span v-else>{{item.okwucan}}</span>
                    </td>
                    <td>
                      <!-- Popover 弹出框 -->
                      <el-popover v-if="item.iswancan" placement="bottom" width="200" trigger="click" :content="item.wancancont">
                        <el-button type="primary" size="mini" slot="reference">是</el-button>
                      </el-popover>
                      <span v-else>否</span>
                      <el-button v-if="item.iswancan && !item.okwancan" type="primary" size="mini" @click="confirm('okwancan',item.id)">完成</el-button>
                      <span v-else>{{item.okwancan}}</span>
                    </td>
                    <td>
                      <!-- Popover 弹出框 -->
                      <el-popover v-if="item.isstay" placement="bottom" width="200" trigger="click" :content="item.staycont">
                        <el-button type="primary" size="mini" slot="reference">是</el-button>
                      </el-popover>
                      <span v-else>否</span>
                      <el-button v-if="item.isstay && !item.okstay" type="primary" size="mini" @click="confirm('okstay',item.id)">完成</el-button>
                      <span v-else>{{item.okstay}}</span>
                    </td>
                    <td>{{item.payer?'客户':'公司'}}</td>
                  </tr>
                </tbody>
              </table>
            </el-tab-pane>
            <el-tab-pane label="客户活动" name="customerActivity">
              <table class="tab-table">
                <thead>
                  <tr>
                    <th>
                      <span class="icon add" @click="openAddActivity"></span>
                    </th>
                    <th>日期</th>
                    <th>活动名称</th>
                    <th>参加人数</th>
                    <th>地点</th>
                    <th>餐费</th>
                    <th>交通费</th>
                    <th>场地费</th>
                    <th>其他费用</th>
                    <th>费用合计</th>
                    <th>备注</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in list" :key="item.id">
                    <td>
                      <span class="icon edit" @click="getActivityFormData(item.id)"></span>
                      <span class="icon del" @click="open2(item.id,'customerActivity')"></span>
                    </td>
                    <td>{{item.date}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.num}}</td>
                    <td>{{item.location}}</td>
                    <td>{{item.mealfee}}</td>
                    <td>{{item.trafficfee}}</td>
                    <td>{{item.venuesfee}}</td>
                    <td>{{item.otherfee}}</td>
                    <td>{{item.mealfee+item.trafficfee+item.venuesfee+item.otherfee}}</td>
                    <td>{{item.note}}</td>
                  </tr>
                  <tr>
                    <td>合计:</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>

                    <td>{{list.mealfee_total}}</td>
                    <td>{{list.trafficfee_total}}</td>
                    <td>{{list.venuesfee_total}}</td>
                    <td>{{list.otherfee_total}}</td>
                    <td>{{list.fee_total}}</td>
                    <td></td>
                  </tr>
                </tbody>
              </table>
            </el-tab-pane>
            <el-tab-pane label="拜访记录" name="customerBaiFang">
              <table class="tab-table">
                <thead>
                  <tr>
                    <th>
                      <span class="icon add" @click="openAddBaiFang"></span>
                    </th>
                    <th>序号</th>
                    <th>拜访人</th>
                    <th>开始日期</th>
                    <th>结束日期</th>
                    <th>拜访主题</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item,index) in list" :key="item.id">
                    <td>
                      <span class="icon edit" @click="getBaiFangFormData(item.id)"></span>
                      <span class="icon del" @click="open2(item.id,'customerBaiFang')"></span>
                    </td>
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.startdate}}</td>
                    <td>{{item.enddate}}</td>
                    <td>{{item.theme}}</td>
                  </tr>
                </tbody>
              </table>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="客户反馈" name="customerFeedback">
          <div id="myChart" style="width:600px;height:400px;margin:0 auto"></div>
        </el-tab-pane>
        <el-tab-pane label="开票信息" name="billingInfo">
          <table class="tab-table">
            <thead>
              <tr>
                <th>
                  <span class="icon add" @click="openAddBilling"></span>
                </th>
                <th>名称</th>
                <th>纳税人识别号</th>
                <th>地址</th>
                <th>电话</th>
                <th>银行</th>
                <th>账号</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in list" :key="item.id">
                <td>
                  <span class="icon edit" @click="getBillingFormData(item.id)"></span>
                  <span class="icon del" @click="open2(item.id,'billingInfo')"></span>
                </td>
                <td>{{item.name}}</td>
                <td>{{item.taxpayer}}</td>
                <td>{{item.address}}</td>
                <td>{{item.tel}}</td>
                <td>{{item.bank}}</td>
                <td>{{item.account}}</td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane label="客户账单" name="customerBill">
          <div class="el-tab-pane-head">
            <el-date-picker size="small" v-model="time" type="daterange" placeholder="请选择时间" @change="handleChange"
          style="margin: 15px 20px;"></el-date-picker>
            <el-button type="primary" @click="downloadBill">导出</el-button>
          </div>
          
          <table class="tab-table">
            <thead>
              <tr>
                <th></th>
                <th>序号</th>
                <th>姓名</th>
                <th>职务</th>
                <th>船东</th>
                <th width="200">培训课程</th>
                <th>培训日期</th>
                <th>培训费用</th>
                <th>住宿标准</th>
                <th>入住天数</th>
                <th>住宿总额</th>
                <th>伙补标准</th>
                <th>伙补总额</th>
                <th>费用总计</th>
                <th>INV No.</th>
                <th>已回款</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in list" :key="item.id">
                <td>
                  <span class="icon edit" @click="getInv(index)"></span>
                </td>
                <td>{{index+1}}</td>
                <td>{{item.name||item.ename}}</td>
                <td>{{item.zhiwu}}</td>
                <td>{{item.chuandong}}</td>
                <td>{{item.course}}</td>
                <td>{{item.date}}</td>
                <td>{{item.tuition}}</td>
                <td>{{item.hotel}}</td>
                <td>{{item.days}}</td>
                <td>{{item.hotel_money}}</td>
                <td>{{item.meal}}</td>
                <td>{{item.meal_money}}</td>
                <td>{{item.total}}</td>
                <td>{{item.inv}}</td>
                <td>{{item.paid_total}}</td>
                <td>{{item.tuition_note}}</td>
              </tr>
              <tr>
                <td colspan="3">合计</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>{{bill_tuition_total}}</td>
                <td></td>
                <td></td>
                <td>{{bill_hotel_total}}</td>
                <td></td>
                <td>{{bill_meal_total}}</td>
                <td>{{bill_total_total}}</td>
                <td></td>
                <td>{{bill_paid_total}}</td>
                <td></td>
              </tr>
            </tbody>
          </table>
          <div style="margin-top: 20px; text-align:center;">
            <el-pagination 
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="50"
              layout="prev, pager, next, jumper"
              :total="total">
            </el-pagination>  
          </div>
        </el-tab-pane>
        <el-tab-pane label="备注" name="customerNote">
          <table class="tab-table">
            <thead>
              <tr>
                <th>
                  <span class="icon add" @click="openAddNote()"></span>
                </th>
                <th>操作人</th>
                <th>备注日期</th>
                <th>备注内容</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in list" :key="item.id">
                <td>
                  <span class="icon edit" @click="getNoteFormData(item.id)"></span>
                  <span class="icon del" @click="open2(item.id,'customerNote')"></span>
                </td>
                <td>{{item.username}}</td>
                <td>{{item.date}}</td>
                <td>{{item.note}}</td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 表单弹框 -->
    <div class="addList">
      <el-dialog title="" :visible.sync="LaiFangFormOpen" size="tiny">
        <el-form :model="LaiFangForm" :rules="LaiFangRules" ref="LaiFangForm">
          <el-form-item label="姓名" label-width="120px" prop="name">
            <el-input v-model="LaiFangForm.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="职务" label-width="120px">
            <el-input v-model="LaiFangForm.zhiwu" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" label-width="120px">
            <el-input v-model="LaiFangForm.tel" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="来访日期" label-width="120px" prop="date">
            <el-date-picker v-model="LaiFangForm.date" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="是否安排接机" label-width="120px">
          <el-radio-group v-model="LaiFangForm.isjieji">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
          <el-form-item label="接机安排" label-width="120px" v-show="LaiFangForm.isjieji==1">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="LaiFangForm.jiejicont">
            </el-input>
          </el-form-item>
          <el-form-item label="是否安排送机" label-width="120px">
            <el-radio-group v-model="LaiFangForm.issongji">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="送机安排" label-width="120px" v-show="LaiFangForm.issongji==1">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="LaiFangForm.songjicont">
            </el-input>
          </el-form-item>
          <el-form-item label="是否安排午餐" label-width="120px">
            <el-radio-group v-model="LaiFangForm.iswucan">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="午餐安排" label-width="120px" v-show="LaiFangForm.iswucan==1">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="LaiFangForm.wucancont">
            </el-input>
          </el-form-item>
          <el-form-item label="是否安排晚餐" label-width="120px">
            <el-radio-group v-model="LaiFangForm.iswancan">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="晚餐安排" label-width="120px" v-show="LaiFangForm.iswancan==1">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="LaiFangForm.wancancont">
            </el-input>
          </el-form-item>
          <el-form-item label="是否安排住宿" label-width="120px">
            <el-radio-group v-model="LaiFangForm.isstay">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="住宿安排" label-width="120px" v-show="LaiFangForm.isstay==1">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="LaiFangForm.staycont">
            </el-input>
          </el-form-item>
          <el-form-item label="付费方" label-width="120px">
            <el-select v-model="LaiFangForm.payer" placeholder="请选择">
              <el-option label="公司" :value="0"></el-option>
              <el-option label="客户" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitLaiFang">提 交</el-button>
        </div>
      </el-dialog>
      <el-dialog title="" :visible.sync="ActivityFormOpen" size="tiny">
        <el-form :model="ActivityForm" :rules="ActivityRules" ref="ActivityForm">
          <el-form-item label="日期" label-width="120px">
            <el-date-picker v-model="ActivityForm.date" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="活动名称" label-width="120px" prop="name">
            <el-input v-model="ActivityForm.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="参加人数" label-width="120px">
            <el-input v-model="ActivityForm.num" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="地点" label-width="120px" prop="location">
            <el-input v-model="ActivityForm.location" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="餐费" label-width="120px">
            <el-input v-model="ActivityForm.mealfee" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="交通费" label-width="120px">
            <el-input v-model="ActivityForm.trafficfee" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="场地费" label-width="120px">
            <el-input v-model="ActivityForm.venuesfee" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="其他费用" label-width="120px">
            <el-input v-model="ActivityForm.otherfee" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" label-width="120px">
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="ActivityForm.note">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitActivity()">提 交</el-button>
        </div>
      </el-dialog>
      <el-dialog title="" :visible.sync="BaiFangFormOpen" size="tiny">
        <el-form :model="BaiFangForm" :rules="BaiFangRules" ref="BaiFangForm">
          <el-form-item label="拜访人" label-width="120px" prop="name">
            <el-input v-model="BaiFangForm.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="开始日期" label-width="120px" prop="startdate">
            <el-date-picker v-model="BaiFangForm.startdate" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期" label-width="120px">
            <el-date-picker v-model="BaiFangForm.enddate" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="拜访主题" label-width="120px">
            <el-input v-model="BaiFangForm.theme" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitBaiFang()">提 交</el-button>
        </div>
      </el-dialog>
      <el-dialog title="" :visible.sync="BillingFormOpen" size="tiny">
        <el-form :model="BillingForm" v-show="tabLabel=='开票信息'" :rules="BillingRules" ref="BillingForm">
          <el-form-item label="名称" label-width="120px" prop="name">
            <el-input v-model="BillingForm.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="纳税人识别号" label-width="120px" prop="taxpayer">
            <el-input v-model="BillingForm.taxpayer" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" label-width="120px">
            <el-input v-model="BillingForm.address" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" label-width="120px">
            <el-input v-model="BillingForm.tel" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="银行" label-width="120px">
            <el-input v-model="BillingForm.bank" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="账号" label-width="120px" prop="account">
            <el-input v-model="BillingForm.account" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitBilling()">提 交</el-button>
        </div>

      </el-dialog>
      <el-dialog title="" :visible.sync="NoteFormOpen" size="tiny">
        <el-form v-show="tabLabel=='备注'" :model="NoteForm" :rules="NoteRules" ref="NoteForm">
          <el-form-item label="备注内容" label-width="120px" prop="note">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="NoteForm.note">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitNote()">提 交</el-button>
        </div>
      </el-dialog>
      <el-dialog title="" :visible.sync="BillingOpen" size="tiny">
        <el-form v-show="tabLabel=='客户账单'" :model="Billing">
          <el-form-item label="已缴培训费用" label-width="120px" prop="paid">
            <el-input placeholder="请输入已缴培训费用" v-model="Billing.paid">
            </el-input>
          </el-form-item>
          <el-form-item label="已缴酒店费用" label-width="120px" prop="paid_money">
            <el-input placeholder="请输入已缴酒店费用" v-model="Billing.paid_money">
            </el-input>
          </el-form-item>
          <el-form-item label="已缴伙补费用" label-width="120px" prop="meal_paid_money">
            <el-input placeholder="请输入已缴伙补费用" v-model="Billing.meal_paid_money">
            </el-input>
          </el-form-item>
          <el-form-item label="INV No." label-width="120px" prop="inv">
            <el-input placeholder="请输入INV No." v-model="Billing.inv">
            </el-input>
          </el-form-item>
          <el-form-item label="备注" label-width="120px" prop="tuition_note">
            <el-input placeholder="请输入备注" v-model="Billing.tuition_note">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitCustomerBilling">提 交</el-button>
        </div>

      </el-dialog>
    </div>
  </div>
</template>
<script>
import "../../assets/css/info.css";
import countryList from "../../assets/js/data";
const LaiFangForm = {
  name: "",
  zhiwu: "",
  tel: "",
  date: "",
  isjieji: "",
  jiejicont: "",
  issongji: "",
  songjicont: "",
  iswucan: "",
  wucancont: "",
  iswancan: "",
  wancancont: "",
  isstay: "",
  staycont: "",
  payer: "",
  
};
const ActivityForm = {
  date: "",
  location: "",
  mealfee: "",
  name: "",
  note: "",
  num: "",
  otherfee: "",
  trafficfee: "",
  venuesfee: ""
};
const BaiFangForm = {
  enddate: "",
  name: "",
  startdate: "",
  theme: ""
};
const BillingForm = {
  name: "",
  taxpayer: "",
  address: "",
  tel: "",
  bank: "",
  account: ""
};
const customerDetailForm = {
  address: "",
  cnumber: "",
  country: "",
  ecdis1: "",
  ecdis2: "",
  email: "",
  fcontact: "",
  femail: "",
  ftel: "",
  name: "",
  peiyuan: "",
  province: "",
  scope: "",
  short_name: "",
  vessel_type: ""
};
const NoteForm = {
  note: ""
};
const Contact = {
  name: "",
  tel: "",
  email: ""
};
const VesselType = {
  type: "",
  dunwei: "",
  num: ""
};
const Billing = {
  id: '',
  paid: '',
  paid_money: '',
  meal_paid_money: '',
  inv: '',
  tuition_note: ''
}
export default {
  data() {
    return {
      bill_tuition_total: 0,
      bill_hotel_total: 0,
      bill_meal_total: 0,
      bill_total_total: 0,
      bill_paid_total: 0,
      time: [],
      customerDetailForm: _g.cloneJson(customerDetailForm),
      LaiFangForm: _g.cloneJson(LaiFangForm),
      ActivityForm: _g.cloneJson(ActivityForm),
      BaiFangForm: _g.cloneJson(BaiFangForm),
      BillingForm: _g.cloneJson(BillingForm),
      NoteForm: _g.cloneJson(NoteForm),
      ContactDetail: _g.cloneJson(Contact),
      VesselTypeDetail: _g.cloneJson(VesselType),
      LaiFangRules: {
        name: [{ required: true, message: "请填写姓名", trigger: "blur" }]
      },
      ActivityRules: {
        name: [{ required: true, message: "请填写活动名称", trigger: "blur" }],
        location: [{ required: true, message: "请填写地点", trigger: "blur" }]
      },
      BaiFangRules: {
        name: [{ required: true, message: "请填写拜访人", trigger: "blur" }]
      },
      BillingRules: {
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
        taxpayer: [{ required: true, message: "请填写识别号", trigger: "blur" }],
        account: [{ required: true, message: "请填写帐号", trigger: "blur" }]
      },
      NoteRules: {
        note: [{ required: true, message: "请填写备注", trigger: "blur" }]
      },
      ContactRules: {
        name: [{ required: true, message: "请填联系人名称", trigger: "blur" }]
      },
      VesselTypeRules: {
        type: [
          {
            type: "number",
            required: true,
            message: "选择船舶类型",
            trigger: "change"
          }
        ]
      },
      CustomerRules: {
        name: [{ required: true, message: "请填写客全名称", trigger: "blur" }],
        cnumber: [{ required: true, message: "请填写客户编号", trigger: "blur" }]
      },
      flag: false,
      //表单弹框
      LaiFangFormOpen: false,
      ActivityFormOpen: false,
      BaiFangFormOpen: false,
      BillingFormOpen: false,
      NoteFormOpen: false,
      dialogFormVisible1: false,
      studentInfo: false,
      ContactOpen: false,
      VesselTypeOpen: false,
      tabLabel: "培训记录",
      proName: "", //课程名称
      content: "", //备注内容
      activeName: "customerLaiFang",
      activeName1: "customerTraining",
      list: [], //列表数据
      countryList: countryList,
      id: "", //客户ID
      customerDetail: [], //客户详情
      customerTraining: [], //客户培训课程
      ContactData: [],
      VesselTypeData: [],
      VesselType: [],
      scope: [],
      myChart: {},
      option: {
        title: {
          text: ""
        },
        // tooltip: {},
        toolbox: {
          show: true,
          right: 20,
          feature: {
            saveAsImage: {
              //保存图片
              show: true
            }
          }
        },
        legend: {
          data: []
        },
        radar: {
          name: {
            formatter: text => {
              text = text.replace(/\S{10}/g, function(match) {
                return match + "\n";
              });
              return text;
            },
            textStyle: {
              color: "#333"
            }
          },
          indicator: []
        },
        series: [
          {
            name: "客户反馈",
            type: "radar",
            label: {
              normal: {
                show: true,
                formatter: function(params) {
                  return params.value;
                }
              }
            },
            data: []
          }
        ]
      },

      page: 1,
      total: 0,
      Billing: _g.cloneJson(Billing),
      BillingOpen: false
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getCustomerDetail();
    this.getCustomerTraining();
    this.getContact();
    this.getVesselType();
    this.getVesselTypeData();
    this.getScopeData();
  },
  methods: {
    confirm(name,id){
      let data = {
        id: id,
        name: name
      }
      this.apiPost('customer/customerLaiFangConfirm',data).then(res=>{
        let remind = res.error?'error':'success'
        _g.toastMsg(remind, res.msg)
        if(!res.error){
          let datas = { id: this.id };
          this.getDataList("customerLaiFang", datas);
        }
      })
    },
    //REMARKS显示隐藏
    isShow() {
      this.flag = !this.flag;
    },
    //获得机构性质列表
    getScopeData() {
      this.apiPost("System/getScope").then(res => {
        this.scope = res;
      });
    },
    //获得船舶类型
    getVesselTypeData() {
      this.apiPost("System/getVesselType").then(res => {
        this.VesselType = res;
      });
    },
    //获取联系人
    getContact() {
      let data = { id: this.id };
      this.apiPost("Customer/customerContact", data).then(res => {
        this.ContactData = res;
      });
    },
    //获取船舶
    getVesselType() {
      let data = { id: this.id };
      this.apiPost("Customer/customerVesselType", data).then(res => {
        this.VesselTypeData = res;
      });
    },
    //标签页切换
    formChange(item) {
      this.time = []
      this.tabLabel = item.label;
      let data = { id: this.id };
      this.getDataList(item.name, data);
      this.activeName = "customerLaiFang";
    },
    handleClick(tab) {
      this.tabLabel = tab.label;
      let data = { id: this.id };
      if(this.label=="客户账单"){
        data.time = this.time
      }
      this.getDataList(tab.name, data);
    },
    //删除提示框
    open2(id, action) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = { id: id };
          let cus = { id: this.id };
          this.apiPost("Customer/" + action + "Delete", data).then(res => {
            if (!res.error) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
            this.getDataList(action, cus);
            this.getContact();
            this.getVesselType();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //获取list数据
    getDataList(url, data) {
      if(this.tabLabel == "客户账单"){
        data.page = this.page
      }
      this.apiPost("Customer/" + url, data).then(res => {
        if (this.tabLabel == "客户反馈") {
          this.myChart.hideLoading();
          this.myChart.setOption({
            radar: {
              indicator: res.indocator
            },
            series: [
              {
                data: res.data
              }
            ]
          });
        }
        if (this.tabLabel == "客户活动") {
          let mealfee_total = 0
          let trafficfee_total = 0
          let venuesfee_total = 0
          let otherfee_total = 0
          let fee_total = 0
          res.forEach(item=>{
            mealfee_total += item.mealfee
            trafficfee_total += item.trafficfee
            venuesfee_total += item.venuesfee
            otherfee_total += item.otherfee
            fee_total += item.mealfee+item.trafficfee+item.venuesfee+item.otherfee
          })
          res.mealfee_total = mealfee_total
          res.trafficfee_total = trafficfee_total
          res.venuesfee_total = venuesfee_total
          res.otherfee_total = otherfee_total
          res.fee_total = fee_total
        }
        
        if (this.tabLabel == "客户账单") {
          this.total = res.total
          this.bill_tuition_total = 0
          this.bill_hotel_total = 0
          this.bill_meal_total = 0
          this.bill_total_total = 0
          this.bill_paid_total = 0
          res.list.forEach(item=>{
            this.bill_tuition_total += parseFloat(item.tuition)||0
            this.bill_hotel_total += parseFloat(item.hotel_money)||0
            this.bill_meal_total += parseFloat(item.meal_money)||0
            this.bill_total_total += parseFloat(item.total)||0
            this.bill_paid_total += parseFloat(item.paid_total)||0
          })
          this.bill_tuition_total = this.bill_tuition_total.toFixed(2)
          this.bill_hotel_total = this.bill_hotel_total.toFixed(2)
          this.bill_meal_total = this.bill_meal_total.toFixed(2)
          this.bill_total_total = this.bill_total_total.toFixed(2)
          this.bill_paid_total = this.bill_paid_total.toFixed(2)
          this.list = res.list;
        }else{
          this.list = res
        }
        
      });
    },
    handleCurrentChange(val){
      this.page = val
      let data = {
        id: this.id,
        time: this.time,
        page: this.page
      }
      this.getDataList('customerBill',data)
    },
    //获得客户培训课程
    getCustomerTraining() {
      let data = { id: this.id };
      this.apiPost("Customer/customerTraining", data).then(res => {
        this.customerTraining = res;
        this.customerTrainingForm = res;
      });
    },

    //获取客户详情
    getCustomerDetail() {
      let data = { id: this.id };
      this.apiPost("Customer/customerDetail", data).then(res => {
        this.customerDetail = res;
        this.customerDetailForm = res;
      });
    },
    //获取开票详情
    getBillingFormData(id) {
      let data = { id: id };
      this.apiPost("Customer/billingInfoDetail", data).then(res => {
        this.BillingForm = res;
        setTimeout(() => {
          this.BillingFormOpen = true;
        }, 0);
      });
    },
    //获得来访记录详情
    getLaiFangFormData(id) {
      let data = { id: id };
      this.apiPost("Customer/customerLaiFangDetail", data).then(res => {
        this.LaiFangForm = res;
        setTimeout(() => {
          this.LaiFangFormOpen = true;
        }, 0);
      });
    },
    //获得活动记录详情
    getActivityFormData(id) {
      let data = { id: id };
      this.apiPost("Customer/customerActivityDetail", data).then(res => {
        this.ActivityForm = res;
        setTimeout(() => {
          this.ActivityFormOpen = true;
        }, 0);
      });
    },
    //获取客户船舶详情
    getVesselTypeDetail(id) {
      let data = { id: id };
      this.apiPost("Customer/customerVesselTypeDetail", data).then(res => {
        this.VesselTypeDetail = res;
        setTimeout(() => {
          this.VesselTypeOpen = true;
        }, 0);
      });
    },
    //获取联系人详情
    getContactDetail(id) {
      let data = { id: id };
      this.apiPost("Customer/customerContactDetail", data).then(res => {
        this.ContactDetail = res;
        setTimeout(() => {
          this.ContactOpen = true;
        }, 0);
      });
    },
    //获得拜访记录详情
    getBaiFangFormData(id) {
      let data = { id: id };
      this.apiPost("Customer/customerBaiFangDetail", data).then(res => {
        this.BaiFangForm = res;
        setTimeout(() => {
          this.BaiFangFormOpen = true;
        }, 0);
      });
    },
    //获得客户备注详情
    getNoteFormData(id) {
      let data = { id: id };
      this.apiPost("Customer/customerNoteDetail", data).then(res => {
        this.NoteForm = res;
        setTimeout(() => {
          this.NoteFormOpen = true;
        }, 0);
      });
    },
    //来访数据提交
    submitLaiFang() {
      this.$refs.LaiFangForm.validate(valid => {
        if (valid) {
          this.LaiFangFormOpen = false;
          let data = this.LaiFangForm;
          data.cusid = this.id;
          this.apiPost("Customer/customerLaiFangEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              let datas = { id: this.id };
              this.getDataList("customerLaiFang", datas);
              this.LaiFangForm = _g.cloneJson(LaiFangForm);
            } else {
              this.LaiFangFormOpen = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    //备注数据提交
    submitNote() {
      this.$refs.NoteForm.validate(valid => {
        if (valid) {
          this.NoteFormOpen = false;
          let data = this.NoteForm;
          data.cusid = this.id;
          this.apiPost("Customer/customerNoteEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              let datas = { id: this.id };
              this.getDataList("customerNote", datas);
              this.NoteForm = _g.cloneJson(NoteForm);
            } else {
              this.NoteFormOpen = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    //客户活动提交
    submitActivity() {
      this.$refs.ActivityForm.validate(valid => {
        if (valid) {
          this.ActivityFormOpen = false;
          let data = this.ActivityForm;
          data.cusid = this.id;
          this.apiPost("Customer/customerActivityEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              let datas = { id: this.id };
              this.getDataList("customerActivity", datas);
              this.ActivityForm = _g.cloneJson(ActivityForm);
            } else {
              this.ActivityFormOpen = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    //拜访数据提交
    submitBaiFang() {
      this.$refs.BaiFangForm.validate(valid => {
        if (valid) {
          this.BaiFangFormOpen = false;
          let data = this.BaiFangForm;
          data.cusid = this.id;
          this.apiPost("Customer/customerBaiFangEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              let datas = { id: this.id };
              this.getDataList("customerBaiFang", datas);
              this.BaiFangForm = _g.cloneJson(BaiFangForm);
            } else {
              this.BaiFangFormOpen = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    //开票数据提交
    submitBilling() {
      this.$refs.BillingForm.validate(valid => {
        if (valid) {
          this.BillingFormOpen = false;
          let data = this.BillingForm;
          data.cusid = this.id;
          this.apiPost("Customer/billingInfoEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              let datas = { id: this.id };
              this.getDataList("billingInfo", datas);
              this.BillingForm = _g.cloneJson(BillingForm);
            } else {
              this.BillingFormOpen = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    //编辑的客户信息提交
    submitCustomerEdit() {
      this.$refs.CustomerRulesName.validate(valid => {
        if (valid) {
          this.dialogFormVisible1 = false;
          let data = this.customerDetail;
          this.apiPost("Customer/customerEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getCustomerDetail();
            } else {
              this.dialogFormVisible1 = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    //联系人提交
    submitContact() {
      this.$refs.ContactRulesName.validate(valid => {
        if (valid) {
          this.ContactOpen = false;
          let data = this.ContactDetail;
          data.cusid = this.id;
          this.apiPost("Customer/customerContactEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getContact();
              this.ContactDetail = _g.cloneJson(Contact);
            } else {
              this.ContactOpen = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    submitVesselType() {
      this.$refs.VesselTypeRulesName.validate(valid => {
        if (valid) {
          this.VesselTypeOpen = false;
          let data = this.VesselTypeDetail;
          data.cusid = this.id;
          this.apiPost("Customer/customerVesselTypeEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getVesselType();
              this.VesselTypeDetail = _g.cloneJson(VesselType);
            } else {
              this.VesselTypeOpen = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    //新增来访记录弹窗
    openAddLaiFang() {
      (this.LaiFangForm = _g.cloneJson(LaiFangForm)),
        (this.LaiFangFormOpen = true);
    },
    //新增拜访记录弹窗
    openAddBaiFang() {
      (this.BaiFangForm = _g.cloneJson(BaiFangForm)),
        (this.BaiFangFormOpen = true);
    },
    //新增活动记录弹窗
    openAddActivity() {
      (this.ActivityForm = _g.cloneJson(ActivityForm)),
        (this.ActivityFormOpen = true);
    },
    //新增开票信息弹窗
    openAddBilling() {
      (this.BillingForm = _g.cloneJson(BillingForm)),
        (this.BillingFormOpen = true);
    },
    //新增客户备注弹窗
    openAddNote() {
      (this.NoteForm = _g.cloneJson(NoteForm)), (this.NoteFormOpen = true);
    },
    //新增客户船舶
    openAddVesselType() {
      (this.VesselTypeDetail = _g.cloneJson(VesselType)),
        (this.VesselTypeOpen = true);
    },
    //新增客户联系人
    openAddContact() {
      (this.ContactDetail = _g.cloneJson(Contact)), (this.ContactOpen = true);
    },
    drawChart() {
      this.myChart = this.$echarts.init(document.querySelector("#myChart"));
      this.myChart.setOption(this.option);
    },

    //客户账单选择日期
    handleChange(){
      let data = {
        id: this.id,
        time: this.time,
        page: this.page
      }
      this.getDataList('customerBill',data)
    },

    //客户账单导出
    downloadBill(){
      if(!this.list.length){
        return false
      }
      let res = this.list
      res.forEach((item,index)=>{
        item.index = index+1
        item.name = item.name||item.ename
      })
      let data = {
        index: '合计',
        tuition:this.bill_tuition_total,
        hotel_money:this.bill_hotel_total,
        meal_money:this.bill_meal_total,
        total:this.bill_total_total,
        paid_total:this.bill_paid_total,
      }
      res.push(data)
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel')
        const tHeader = ['序号', '姓名', '身份证号', '职务', '培训课程', '培训日期', '培训费用', '住宿标准', '入住天数', '住宿总额', '伙补标准',
        '伙补总额','费用总计','INV No.','已回款']
        const filterVal = ['index', 'name', 'idcard', 'zhiwu', 'course', 'date', 'tuition', 'hotel', 'days','hotel_money','meal',
        'meal_money','total','inv','paid_total']
        const data = this.formatJson(filterVal, this.list)
        export_json_to_excel(tHeader, data, '客户账单')
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    getInv(index){
      this.BillingOpen = true
      this.Billing = _g.cloneJson(this.list[index])
    },
    submitCustomerBilling(){
      this.apiPost('customer/customerBillEdit', this.Billing).then(res=>{
        _g.toastMsg(res.error?'error':'success', res.msg)
        if(!res.error){
          let data = {
            id: this.id,
            time: this.time,
            page: this.page
          }
          this.getDataList('customerBill',data)
          this.BillingOpen = false
        }
      })
    }
  },
  mounted() {
    this.drawChart();
    this.myChart.showLoading("default", { color: "#0177BF" });
  }
};
</script>
<style lang="css" scoped>
.showBox {
  height: auto;
}

.showBox .el-col-11 {
  height: 41px;
}

.showBox .edit {
  background: url(../../img/edit.gif) no-repeat;
}

.showBox .del {
  background: url(../../img/del.png) no-repeat;
}

.showBox .add {
  background: url(../../img/add.gif) no-repeat;
}

.record .add {
  background: url(../../img/add.png) no-repeat;
  width: 24px;
  height: 24px;
}

.hint {
  text-align: right;
  font-size: 12px;
  padding-right: 20px;
  margin-bottom: 5px;
  color: red;
}

.addList .el-select {
  width: 100%;
}

.addList .el-form-item {
  margin-bottom: 20px;
}
.el-tab-pane-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;
}
</style>
